
<template>
  <div class="box">
    <div
      :style="{
        transition:`all ${time}s ease-in-out`,
        transform: `translateY(-${number * 10}%)`,
      }"
    >
      <div
        ref="num"
        v-for="(item,index) of nums"
        :key="index"
        class="num"
      >
        <slot>
          {{ item }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberBox',
  props: {
    // 时间
    time: {
      type: Number,
      default: 0.3
    },
    // 数字
    number: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      nums: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  },
  mounted() {
    console.log('this.$refs.num[0]', this.$refs.num[0].get)
  }
}
</script>

<style lang="scss">
.box {
  width: 54px;
  height: 82px;
  overflow: hidden;
}

.num {
  width: 54px;
  height: 82px;
  text-align: center;
  line-height: 82px;
  background: #0c7a43;
}
</style>
